<template>
  <view>
    <!-- 原文连接：https://blog.csdn.net/sd1sd2/article/details/131241609 -->
    <!-- @close="examClose" @confirm="examConfirm" appMessage -->
    <uni-popup ref="renewalPopup" background-color="#fff" type="center">
      <view class="renewal">
        <view class="newIden">NEW</view>
        <view class="edition">
          <text class="discover">发现新版本</text>
          <text class="version"> v2.6.3 </text>
        </view>
        <view class="edi">
          <text class="editionTitle">【版本更新】</text>
        </view>
        <view
          :class="{
            editiondes: forceRenewal == 1,
            editiondesis: forceRenewal != 1,
          }"
        >
          <rich-text class="desEdition" :nodes="appMessage.content"></rich-text>
        </view>
        <view v-if="forceRenewal == 1" :class="{ isIOs: isIos == 'ios' }">
          <text class="des"> 本次升级涉及主要内容，需更新后才能使用 </text>
        </view>
        <!-- forceRenewal -->
        <view
          v-if="currentPercent == 0"
          class="editionBtn"
          @click="onRenewalApp"
        >
          <text class="btnText">立即更新</text>
        </view>
        <view v-else class="editionBtn" @click="handleInstallApp">
          <text class="btnText">
            {{ currentPercent < 100 ? "下载中..." : "立即安装" }}
          </text>
        </view>
        <!-- hasProgress 是否展示进度条 -->
        <view v-if="hasProgress" class="ProgressBox">
          <view class="progress">
            <view
              class="progressW"
              :style="{ width: (400 * currentPercent) / 100 + 'rpx' }"
            ></view>
          </view>
          <view class="txt">{{ currentPercent + "%" || "0%" }}</view>
        </view>
        <view v-else>
          <text
            v-if="forceRenewal == 1 && isIos != 'ios'"
            class="exitBtn"
            @click="onExitBtn"
            >退出应用</text
          >
          <text v-if="forceRenewal == 2" class="exitBtn" @click="onNotBtn">暂不更新</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UniPopup from "@/components/uni-popup/uni-popup";
import UniPopupDialog from "@/components/uni-popup/uni-popup-dialog";
import { downloadApp, installApp } from "./upgrade.js";

export default {
  components: {
    UniPopup,
    UniPopupDialog,
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
    lang() {
      return this.$i18n.locale;
    },
  },
  props: {
    // 更新信息
    appMessage: {
      type: Object,
      default: {},
    },
    // 是否强制更新
    forceRenewal: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      isDownloadFinish: false, //是否下载完成
      fileName: "", //下载后app本地路径名称
      hasProgress: false, //是否能显示进度条
      currentPercent: 0, //当前下载百分比
      isIos: "android",
    };
  },
  created() {
    this.isIos = uni.getSystemInfoSync().platform;
  },
  methods: {
    //  开启弹窗
    onOpen() {
      //隐藏 tabbar
      uni.hideTabBar();
      this.$refs.renewalPopup.open();
    },
    onRenewalApp() {
      if (uni.getSystemInfoSync().platform == "android") {
        //开始下载App
        downloadApp(this.appMessage.androidUrl, (current) => {
          //下载进度监听
          this.hasProgress = true;
          this.currentPercent = current;
          if (this.currentPercent >= 100) {
            this.hasProgress = false;
          }
        })
          .then((fileName) => {
            //下载完成
            this.isDownloadFinish = true;
            this.fileName = fileName;
            if (fileName) {
              //自动安装App
              this.handleInstallApp();
            }
          })
          .catch((e) => {
            console.log(e, "e");
          });
      } else if (uni.getSystemInfoSync().platform == "ios") {
        //在App Store Connect中的App Store下的app信息，可找到appleId
        let appleId = 1633241273;
        plus.runtime.launchApplication(
          {
            action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`,
          },
          function (e) {
            console.log("Open system default browser failed: " + e.message);
          }
        );
      }
    },
    //安装app
    handleInstallApp() {
      //下载完成才能安装，防止下载过程中点击
      if (this.isDownloadFinish && this.fileName) {
        installApp(this.fileName, () => {
          //安装成功,关闭升级弹窗
          uni.navigateBack();
        });
      }
    },
    // 退出
    onExitBtn() {
      if (uni.getSystemInfoSync().platform == "android") {
        plus.runtime.quit();
      } else if (uni.getSystemInfoSync().platform == "ios") {
        plus.ios
          .import("UIApplication")
          .sharedApplication()
          .performSelector("exit");
      }
    },
    // 暂不更新
    onNotBtn() {
      //显示tabbar
      uni.showTabBar();
      this.$refs.renewalPopup.close();
    },
  },
};
</script>

<style scoped lang="scss">
.renewal {
  width: 598rpx;
  height: 840rpx;
  background-image: url("@/static/appUpdate.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  overflow: hidden;
  .newIden {
    width: 84rpx;
    height: 38rpx;
    background: #ff7326;
    border-radius: 142rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 38rpx;
    margin-left: 96rpx;
    margin-top: 236rpx;
    text-align: center;
  }
  .edition {
    display: flex;
    margin-left: 96rpx;
    margin-top: 24rpx;
    .discover {
      display: inline-block;
      font-size: 48rpx;
      font-weight: 500;
      line-height: 68rpx;
      background: linear-gradient(
        270deg,
        #5099f7 0%,
        rgba(80, 172, 247, 0.7534) 25%,
        rgba(80, 88, 247, 0.3836) 62%,
        #f7507f 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .version {
      height: 38rpx;
      padding: 0px 16rpx;
      background: #3cacff;
      border-radius: 32rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 38rpx;
      text-align: center;
      margin-left: 16rpx;
      margin-top: 16rpx;
    }
  }
  .edi {
    margin-left: 96rpx;
    margin-top: 20rpx;
    .editionTitle {
      font-size: 28rpx;
      font-weight: 400;
      color: #3d3d3d;
    }
  }
  .editiondes {
    margin-top: 8rpx;
    margin-left: 96rpx;
    width: 450rpx;
    height: 208rpx;
    .desEdition {
      font-size: 28rpx;
      font-weight: 400;
      color: #3d3d3d;
      line-height: 40rpx;
      white-space: pre-wrap;
    }
  }
  .editiondesis {
    margin-top: 8rpx;
    margin-left: 96rpx;
    width: 450rpx;
    height: 232rpx;
    .desEdition {
      font-size: 28rpx;
      font-weight: 400;
      color: #3d3d3d;
      line-height: 40rpx;
      white-space: pre-wrap;
    }
  }
  .des {
    margin-left: 96rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }
  .isIOs {
    margin-top: 22rpx;
  }
  .editionBtn {
    margin-left: 96rpx;
    margin-top: 12rpx;
    width: 460rpx;
    height: 72rpx;
    background: #4e6ef2;
    border-radius: 38rpx;
    text-align: center;
    .btnText {
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 72rpx;
    }
  }
  .exitBtn {
    display: inline-block;
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #4e6ef2;
    margin-left: 278rpx;
    margin-top: 18rpx;
    border-bottom: 2rpx solid #4e6ef2;
  }
  .ProgressBox {
    display: flex;
    .progress {
      width: 400rpx;
      margin-left: 94rpx;
      margin-top: 20rpx;
      height: 20rpx;
      border-radius: 138rpx;
      background: #dadad8;
    }
    .progressW {
      height: 20rpx;
      border-radius: 138rpx;
      background: linear-gradient(90deg, #4e6ef2 5%, #5099f7 94%);
    }
    .txt {
      font-size: 28rpx;
      margin-left: 12rpx;
      margin-top: 10rpx;
      color: #6dabf7;
    }
  }
}
::v-deep .renePopup {
  .uni-dialog-button-group {
    display: none;
  }
}
</style>
